<template>
  <div class="wrap">

    <SkyCardPanel title="确认弹框">
      <div slot="main">
         <div class="block">
          确认框
         <SkyButton @click="Confirm1">确认框</SkyButton> <span></span>
         <SkyButton @click="Confirm3">icon确认框</SkyButton> <span></span>
        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //确认框
              
                  let content = `&lt;div &gt;解散后将无法再查看、发布群消息！&lt;/div&gt;`
                  const confirm = this.$SkyConfirm({
                    title: '你确定要解散该群吗？',
                    text: content,
                    dangerouslyUseHTMLString: false,
                    button: [
                      {
                        text: '取消',
                        ontap: function () {
                          confirm.close().then(function (res) {
                            console.log('取消')
                          });
                        }
                      }, {
                        text: '确定',
                        ontap: function () {
                          confirm.close().then(function (res) {
                            console.log('确认')
                          });
                        }          },
                    ]
                  })


                //icon确认框
                
                  let content = `&lt;div &gt;解散后将无法再查看、发布群消息！&lt;/div&gt;`
                  const confirm = this.$SkyConfirm({
                    title: '你确定要解散该群吗？',
                    icon: {
                      iconname: 'laoying'
                    },
                    text: content,
                    dangerouslyUseHTMLString: false,
                    button: [
                      {
                        text: '取消',
                        ontap: function () {
                          confirm.close().then(function (res) {
                            console.log('取消')
                          });
                        }
                      }, {
                        text: '确定',
                        ontap: function () {
                          confirm.close().then(function (res) {
                            console.log('确认')
                          });
                        }         
                    },
                    ]
                  })


          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <SkyCardPanel title="操作反馈">
      <div slot="main">
        <div class="block">
          带图标
        <SkyButton @click="SuccessMessage">保存成功</SkyButton> <span></span>
        <SkyButton @click="ErrorMessage">保存失败</SkyButton> <span></span>
        </div>
        <div class="block">
          纯文本
        <SkyButton @click="Message">保存成功</SkyButton> <span></span>
        </div>
          <div class="block">
        自定义关闭时间 和 关闭消息
        <SkyButton @click="SelfMessage">保存成功</SkyButton> <span></span>
        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">

                //带图标

                this.$SkyMessage('已成功保存', 'success')

                this.$SkyMessage('保存失败', 'error')

                //纯文本

                this.$SkyMessage('已成功保存')   

                //自定义关闭时间 和 关闭消息

                this.$SkyMessage({
                  content: '自定义关闭时间',
                  time: 5000,
                  type: 'success',
                  hasClose: true
                })
   
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <hr>
  </div>
</template>

<script>
export default {
  methods: {
    Confirm1 () {
      let content = `<div >解散后将无法再查看、发布群消息！</div>`
      const confirm = this.$SkyConfirm({
        title: '你确定要解散该群吗？',
        text: content,
        dangerouslyUseHTMLString: false,
        button: [
          {
            text: '取消',
            ontap: function () {
              confirm.close().then(function (res) {
                console.log('取消')
              });
            }
          }, {
            text: '确定',
            ontap: function () {
              confirm.close().then(function (res) {
                console.log('确认')
              });
            }          },
        ]
      })
    },
    Confirm3 () {
      let content = `<div >解散后将无法再查看、发布群消息！</div>`
      const confirm = this.$SkyConfirm({
        title: '你确定要解散该群吗？',
        icon: {
          iconname: '-icon_warn'
        },
        text: content,
        dangerouslyUseHTMLString: false,
        button: [
          {
            text: '取消',
            ontap: function () {
              confirm.close().then(function (res) {
                console.log('取消')
              });
            }
          }, {
            text: '确定',
            ontap: function () {
              confirm.close().then(function (res) {
                console.log('确认')
              });
            }
          },
        ]
      })
    },
    SuccessMessage () {
      this.$SkyMessage('已成功保存', 'success')
    },
    ErrorMessage () {
      this.$SkyMessage('保存失败', 'error')
    },
    Message () {
      this.$SkyMessage('已成功保存')
    },
    SelfMessage () {
      this.$SkyMessage({
        content: '自定义关闭时间',
        time: 5000,
        type: 'success',
        hasClose: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
}
</style>